<template>
  <div class="card-image2">
    <el-row>
      <el-col :span="24" :xs="24">
        <div class="card-image-text-imagebox">
          <img src="../../../static/blog-img/7.jpg" alt="">
          <post-date></post-date>
        </div>
      </el-col>
      <el-col :span="24" :xs="24">
        <div class="card-image-text-textbox">
          <!--card-image-text-->
          <div class="card-text">
            <div class="news-item-text">
              <div class="news-item-line"></div>
              <div class="news-item-tag">
                Lifestyle
              </div>
              <h4 class="news-item-title">
                Welcome to this Lifestyle blog
              </h4>
              <p class="news-item-content">
                Curabitur venenatis efficitur lorem sed tempor. Integer aliquet tempor cursus. Nullam vestibulum convallis risus
                vel condimentum. Nullam auctor lorem in libero luctus, vel volutpat quam tincidunt. Morbi sodales, dolor id
                ultricies dictum
              </p>
              <p class="news-item-mate">
                <em style="float: left;color: #878787;">
                  BY <span style="color: #000;">LexSin</span>
                </em>
                <em style="float: right;color: #878787;">
                  <span style="color: #000;">3</span> Comments
                </em>
              </p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import postDate from '../postDate/postDate'
export default {
  name: 'card-image2',
  components: {
    postDate
  }
}
</script>

<style scoped lang="less">
.card-image2{
  overflow: hidden;
  .card-image-text-imagebox{
    position: relative;
    padding: 1%;
    img{
      width: 100%;
    }
  }
  .card-image-text-textbox{
    padding: 3%;
    .card-text {
      .news-item-line {
        width: 26px;
        height: 2px;
        background: #c8c8c8;
        margin-bottom: 20px;
      }
      .news-item-tag {
        color: #a1a1a1;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-bottom: 10px;
        display: block;
      }
      .news-item-title {
        display: inline-block;
        color: #000000;
        font-size: 24px;
        margin-bottom: 30px;
      }
      .news-item-tag:hover{
        color: #000000;
        transition: color .15s ease-in-out;
      }
      .news-item-title:hover{
        color: #30336b;
        transition: color .15s ease-in-out;
      }
      .news-item-content {
        color: #878787;
        font-size: 14px;
        line-height: 2;
      }
      .news-item-mate{
        line-height: 34px;
        font-size: 12px;
        em{
          text-transform: uppercase;
          letter-spacing: 3px;
        }
      }
    }
  }
}
</style>
